<template>
  <div class="card">
    <div class="row row1">
      <text>商品总金额</text>
      <MoneyCard
          :price="
          data.spuListVos?.[0].orderSkuVo?.price *
          data.spuListVos?.[0].orderSkuVo?.buyCount
        "
          :coins="0"
      ></MoneyCard>
    </div>
    <div class="row row1" v-if="data.payableDeposit"
         :style="{paddingBottom:data.depositRefundListVos?.length? '0px':null}">
      <text>押金</text>
      <MoneyCard
          :price="
         data.payableDeposit
        "
          :coins="0"
      ></MoneyCard>
    </div>
    <div style="font-size: 12px;color: grey;word-break:break-all" v-if="data.depositRefundListVos?.length">
      已于{{
        data.depositRefundListVos?.[0].refundTime
      }}完成退款，退款金额¥{{
        data.depositRefundListVos?.[0].refundAmount
      }}，退款单号：{{ data.depositRefundListVos?.[0].number }}
    </div>
    <div class="row row1" v-if="data.coupon">
      <text>优惠券</text>
      <text style="font-size: 12px; color: rgba(236, 94, 65, 1)">{{ data.coupon }}</text>
    </div>
    <div class="row row1" v-if="Number(data.integral)">
      <text>使用积分</text>
      <div>{{ data.integral }}</div>
    </div>
    <div class="row row1" v-if="Number(data.integralAmount||0)">
      <text>积分抵扣</text>
      <MoneyCard :price="(Number(data.integralAmount||0)).toFixed(2)" :coins="0"

      ></MoneyCard>
    </div>
    <div class="row row1">
      <text>实际{{ ![0, 5].includes(data.status) ? '支' : '需' }}付</text>
      <!--      todo data.actualAmount-->
      <MoneyCard
          :price="data.spuListVos[0].bundleTag!==null? data.actualPrice.toFixed(2): (data.realAmount ||0.00).toFixed(2)"
          :coins="0"

      ></MoneyCard>
    </div>
  </div>
</template>

<script setup>
import MoneyCard from '@/views/activityPages/components/money-card.vue';

const props = defineProps(['data']);
</script>

<style lang="scss" scoped>
@import url('@/views/activityPages/style/card.css');

.text1 {
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  font-weight: bold;
  padding-bottom: 5px;
}

.text2 {
  line-height: 14px;
  color: rgba(153, 153, 153, 1);
  font-size: 10px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.row1 {
  justify-content: space-between;
  padding-bottom: 10px;
  width: 100%;
}
</style>
